/* components */
import { FormBuilderTableColumnsView } from '@src/component/form/form-builder-table/components';
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum';
/* const */
// import { COMMON_HEADER_ROW_CLASS_NAME } from '@model/const/Table';
/* hooks */
import { useFormBuilderTableEdit } from '@src/component/form/form-builder-table/hooks';
/* model */
import Column from '@model/types/Column';
/* scss */
import '@src/component/form/form-builder-table/index.scss';
/* vue */
import { defineComponent, CreateElement, VNode, PropType, computed, getCurrentInstance } from 'vue';

// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface FormBuilderTableSetupState {
  
};

export enum FormBuilderTableEventNameEnum {
  Input = 'input',
  Delete = 'delete'
};

type FormBuilderTableTextData = {
  // 序号
  serialNumber: string;
  // 操作
  operate: string;
  // 编辑
  edit: string;
  // 删除
  delete: string;
};

export type FormBuilderTableProps = {
  // 表格列
  columns: Column[];
  // 表格数据
  data: Record<string, any>[];
  // 是否编辑模式
  isEdit: boolean;
  // 文本数据
  textData: FormBuilderTableTextData;
};


const FormBuilderTableTextDataDefault: FormBuilderTableTextData = {
  serialNumber: '序号',
  operate: '操作',
  edit: '编辑',
  delete: '删除'
};

export default defineComponent({
  name: ComponentNameEnum.FormBuilderTable,
  emits: [
    FormBuilderTableEventNameEnum.Input,
    FormBuilderTableEventNameEnum.Delete
  ],
  props: {
    // 表格列
    columns: {
      type: Array as PropType<Column[]>,
      default: () => []
    },
    // 表格数据
    data: {
      type: Array as PropType<Record<string, any>[]>,
      default: () => []
    },
    // 是否编辑模式
    isEdit: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    // 文本数据
    textData: {
      type: Object as PropType<FormBuilderTableTextData>,
      default: () => ({})
    }
  },
  setup(props: FormBuilderTableProps, { emit }) {
    
    const currentInstance = getCurrentInstance();
    const instance = currentInstance?.proxy;
    const columns = computed(() => props?.columns || []);
    
    const { onTableCellClickHandler, lastClickTableCellData } = useFormBuilderTableEdit(columns, instance);
    
    return {
      onTableCellClickHandler,
      lastClickTableCellData
    }
    
  },
  computed: {
    /** 
     * @description 删除按钮文本
    */
    deleteButtonText(): string {
      return this.textData?.delete || FormBuilderTableTextDataDefault.delete;
    },
    /** 
     * @description 操作文本
    */
    operateText(): string {
      return this.textData?.operate || FormBuilderTableTextDataDefault.operate;
    },
    /** 
     * @description 序号文本
    */
    serialNumberText(): string {
      return this.textData?.serialNumber || FormBuilderTableTextDataDefault.serialNumber;
    }
  },
  methods: {
    /** 
     * @description 操作列 - 删除按钮点击事件处理器
    */
    onOperateColumnDeleteButtonClickHandler(row: Record<string, any>, index: number) {
      this.$emit(FormBuilderTableEventNameEnum.Delete, index);
    },
    /**
     * @description 渲染操作列
    */
    renderOperateColumn(h: CreateElement, row: Record<string, any>, index: number) {
      return (
        <div class="form-builder-table-operate">
          {this.renderOperateColumnDeleteButton(h, row, index)}
        </div>
      )
    },
    /**
     * @description 渲染操作列 - 删除按钮
    */
    renderOperateColumnDeleteButton(h: CreateElement, row: Record<string, any>, index: number) {
      
      const onOperateColumnDeleteButtonClickHandler = () => {
        this.onOperateColumnDeleteButtonClickHandler(row, index);
      };
      
      return (
        <el-button
          type="text"
          size="mini"
          onClick={onOperateColumnDeleteButtonClickHandler}
        >
          {this.deleteButtonText}
        </el-button>
      )
      
    }
  },
  render(h: CreateElement) {
    return (
      <div class={ComponentNameEnum.FormBuilderTable}>
        
        <el-table
          border
          resizable
          show-overflow
          data={this.data}
          header-row-class-name="common-list-table-header__v2"
          onCell-click={this.onTableCellClickHandler}
        >
          
          {/* start 序号列 */}
          <el-table-column 
            fixed="left"
            type="index"
            width="60"
            title={this.serialNumberText}
            label={this.serialNumberText}
          >
          </el-table-column>
          {/* end 序号列 */}
          
          {/* start 其他自定义列 */}
          <FormBuilderTableColumnsView
            columns={this.columns}
            data={this.data}
          >
          </FormBuilderTableColumnsView>
          {/* end 其他自定义列 */}
          
          {/* start 操作列 */}
          <el-table-column
            width="120"
            fixed="right"
            title={this.operateText}
            label={this.operateText}
            scopedSlots={{
              default: (scope: { row: Record<string, any>, $index: number }) => {
                const row = scope?.row || {};
                const index = scope?.$index;
                return this.renderOperateColumn(h, row, index);
              }
            }}
          >
          </el-table-column>
          {/* end 操作列 */}
          
        </el-table>
        
      </div>
    ) as unknown as VNode
  }
})
